<template>
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pager.current_page"
        :page-sizes="pageSizes"
        :page-size="pager.per_page"
        :layout="pageLayout"
        :total="pager.total">
    </el-pagination>
</template>

<script>

export default {
    props: {
        dataPager: {
            type: Object,
            default: function (){
                return {}
            }
        },
        pageSizes: {
            type: Array,
            default: function (){
                return [
                    10,
                    50,
                    100,
                    200
                ]
            }
        },
        pageCount: {
            type: Number,
            default: 11,
        },
        pageLayout: {
            type: String,
            default: "total, sizes, prev, pager, next,jumper",
        },
        ajaxCallback: {
            type: Function,
            default: null
        },

    },
    data() {
        return {
          pager :{}
        }
    },
    created() {
        this.pager = Object.assign({},this.pager,this.dataPager)
    },
    mounted() {


    },
    beforeDestroy() {

    },
    watch: {},
    methods: {
        handleSizeChange(val) {
          this.pager.per_page = val
            if(LeUtils.typeIs('function',this.ajaxCallback)){
                this.ajaxCallback(this.pager)
                return
            }
            window.location.href = LeUtils.buildUrl(window.location.href,{per_page:val})
        },
        handleCurrentChange(val) {
          this.pager.current_page = val
          if(LeUtils.typeIs('function',this.ajaxCallback)){
            this.ajaxCallback(this.pager)
            return
          }
          console.log("aaa")
          console.log(LeUtils.buildUrl(window.location.href,{pager_page:val}))
          window.location.href = LeUtils.buildUrl(window.location.href,{pager_page:val})
        }

    }
}
</script>
